<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Demo 示例</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
        <link rel="shortcut icon" href="//live-cdn.baijiayun.com/video-cloud/asset/common/img/logo_02e27bba25.ico">
        <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="icomoon/style.css"/>
        <link rel="stylesheet" type="text/css" href="./src/css/style.css"/>
        <link rel="stylesheet" href="//live-cdn.baijiayun.com/js-sdk/2.21.1/classroom/classroom.css">
        <link rel="stylesheet" href="//live-cdn.baijiayun.com/js-sdk/2.21.1/loading/live/Loading.css">
        <link rel="stylesheet" href="//live-cdn.baijiayun.com/js-sdk/2.21.1/whiteboard/Whiteboard.css">
        <link rel="stylesheet" href="//live-cdn.baijiayun.com/js-sdk/2.21.1/message/messageList/MessageList.css">
        <link rel="stylesheet" href="//live-cdn.baijiayun.com/js-sdk/2.21.1/message/messageSender/MessageSender.css">
        <link rel="stylesheet" href="//live-cdn.baijiayun.com/js-sdk/2.21.1/questionAnswer/QuestionAnswer.css">
        <link rel="stylesheet" href="//live-cdn.baijiayun.com/js-sdk/2.21.1/notice/Notice.css"/>
    </head>
    <body>

        <div id="loading">
            <div class="placeholder"></div>
        </div>

        <div id="main">
            <div class="video">
                <div class="teacher-status">老师还未进入教室</div>
                <div id="h5-player"></div>
                <div class="player-layer">
                    <div id="button-play">点击播放</div>
                </div>
                <div class="barrage-wrap"></div>
            </div>
            <div id="menu"></div>
            <div class="list-section">
                <div id="notice">
                    <div class="placeholder"></div>
                </div>
                <div class="list">
                    <div class="tab">
                        <span id="btn-whiteboard" class="tab-list tab-select">白板</span>
                        <span id="btn-question-list" class="tab-list">问答</span>
                        <span id="btn-message-list" class="tab-list">聊天</span>
                    </div>
                    <div class="tab-item">
                        <div id="list-box" class="tab-content">
                            <div id="whiteboard">
                                <div class="placeholder"></div>
                                <div class="pre-page">
                                    <i class="icon icon-chevron-left"></i>
                                </div>
                                <div class="next-page">
                                    <i class="icon icon-chevron-right"></i>
                                </div>
                                <div class="doc-full-screen">
                                    <i class="icon icon-expand"></i>
                                </div>
                            </div>
                            <div id="question-answer" class="question-answer-box">
                                <div class="placeholder"></div>
                            </div>
                            <div class="message-box">
                                <div id="message-list" >
                                    <div class="placeholder"></div>
                                </div>
                                <div id="message-sender">
                                    <div class="placeholder"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="./base/0.0.1/src/base.js"></script>
        <script src="//live-cdn.baijiayun.com/js-sdk/2.21.1/classroom/classroom.js"></script>
        <script src="//live-cdn.baijiayun.com/js-sdk/2.21.1/loading/live/Loading.js"></script>
        <script src="//live-cdn.baijiayun.com/js-sdk/2.21.1/component/canvas/Canvas.js"></script>
        <script src="//live-cdn.baijiayun.com/js-sdk/2.21.1/whiteboard/Whiteboard.js"></script>
        <script src="//live-cdn.baijiayun.com/js-sdk/2.21.1/message/messageList/MessageList.js"></script>
        <script src="//live-cdn.baijiayun.com/js-sdk/2.21.1/message/messageSender/MessageSender.js"></script>
        <script src="//live-cdn.baijiayun.com/js-sdk/2.21.1/player/player.js"></script>
        <script src="//live-cdn.baijiayun.com/js-sdk/2.21.1/player/core/Player.js"></script>
        <script src="//live-cdn.baijiayun.com/js-sdk/2.21.1/player/extension/html.js"></script>
        <script src="//live-cdn.baijiayun.com/js-sdk/2.21.1/questionAnswer/QuestionAnswer.js"></script>
        <!-- 如果你需要使用webrtc拓展，你需要先引入这个依赖 -->
        <script src="//live-cdn.baijiayun.com/realtimecat/1.0.26/realtimecat.js"></script>
        <!-- 公告 -->
        <script src="//live-cdn.baijiayun.com/js-sdk/2.21.1/notice/Notice.js"></script>
        <!-- 弹幕组件 -->
        <script src="//live-cdn.baijiayun.com/js-sdk/2.21.1/barrage/Barrage.js"></script>
        <script>
            require.config({
                baseUrl: './src'
            });
            require(['main', 'whiteboard', 'loading', 'messagePanel', 'playerPanel', 'roleMap'], function (main) {
                main.init();
            });
        </script>
    </body>
</html>